<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .root {
            width: 800px;
            margin: 0 auto;
        }

        .title span {
            display: inline-block;
            width: 100px;
            line-height: 30px;
            text-align: center;
            background-color: #ccc;
        }

        .box {
            /* padding:0 10px; */
            margin: 10px 0;
            background-color: rgb(228, 224, 224);
        }

        .box input {
            width: 300px;
            height: 25px;
            line-height: 25px;
            margin: 10px;
            padding-left: 5px;
        }

        .box button {
            width: 100px;
            height: 30px;
            background-color: #ccc;
            border: none;
            margin: 10px;
        }

        .ge {
            border-top: 5px solid white;
            padding: 10px;

        }

        .title .blue {
            background-color: rgb(78, 111, 232);
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="title">
            <span v-for="(item, index) in arr" :key="index" @click="kan(index)"
                :class={blue:item.flag}>{{item.content}}</span>
            <post-comments v-show="flag2==true"></post-comments>
            <comment-management v-show="flag1==true"></comment-management>
        </div>



    </div>
    <!-- 发表评论 -->
    <template id="release">
        <div class="box">
            <p><input type="text" placeholder="昵称" v-model="people"></p>
            <p><input type="text" placeholder="评论内容" v-model="content"></p>
            <p><button @click="sub">立即提交</button></p>
        </div>
    </template>
    <!-- 管理评论 -->
    <template id="manage">
        <div class="box">
            <div v-for="(item, index) in pingArr" :key="index">
                <div class="ge">
                    <h5>评论人:{{item.people}}</h5>
                    <h5>评论时间:{{item.time}}</h5>
                    <h5>评论内容:{{item.content}}</h5>
                </div>
            </div>


        </div>
    </template>
    <script src="./moment.min.js"></script>
    <script src="./vue.js"></script>
    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;
        const bus = new Vue();
        // 发表评论
        const release = {
            template: '#release',
            data() {
                return {
                    people: '',
                    content: '',

                }
            },
            methods: {
                sub() {
                    console.log(this.people);
                    bus.$emit('sub', { people: this.people, time: JSON.parse(JSON.stringify(moment(Date.now()).format('YYYY-MM-DD hh:mm:ss'))), content: this.content });
                    this.people = '';
                    this.content = '';
                }
            },

        }
        // 管理评论
        const manage1 = {
            template: '#manage',
            data() {
                return {
                    pingArr: [
                        { people: '评论人-1', time: moment(Date.now()).format('YYYY-MM-DD'), content: '评论内容-1' },

                    ]
                }
            },
            mounted() {
                bus.$on('sub', (obj) => {
                    this.pingArr.push(obj);
                })
            },
            beforeDestroy() {
                bus.$off('sub');
            },
        }
        //创建vue实例
        new Vue({
            el: '.root',
            data: function () {
                return {
                    arr: [
                        { content: '评论管理', flag: true, },
                        { content: '发布评论', flag: false, },
                    ],
                    flag1: true,
                    flag2: false,

                }
            },
            components: {
                "post-comments": release,
                'comment-management': manage1,
            },
            methods: {
                kan(index) {
                    this.arr.forEach(v => {
                        v.flag = false;
                    });
                    this.arr[index].flag = true;
                    if (index == 0) {
                        this.flag1 = true;
                        this.flag2 = false;

                    } else {
                        this.flag2 = true;
                        this.flag1 = false;
                    }
                }
            },
        })
    </script>
</body>

</html>